<template>
  <div class="question-container">
    <el-card class="box-card">
      <!-- 头部 -->
      <div slot="header" class="box-card-title">
        <el-row>
          <el-col :span="22"
            ><div class="grid-content bg-purple-dark">
              <el-form :inline="true">
                <el-form-item label="关键字">
                  <el-input
                    v-model="queryObj.keyword"
                    placeholder="根据文章标题搜索"
                    style="width: 190px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="状态">
                  <el-select v-model="queryObj.state" placeholder="请选择">
                    <el-option label="启用" value="1"></el-option>
                    <el-option label="禁用" value="0"></el-option>
                  </el-select>
                  <el-button style="margin-left: 15px" @click="close"
                    >清除</el-button
                  >
                  <el-button type="primary" @click="clickSearch"
                    >搜索</el-button
                  >
                </el-form-item>
              </el-form>
            </div></el-col
          >
          <el-col :span="2"
            ><el-button
              style="font-size: 12px; float: right"
              type="success"
              icon="el-icon-edit"
              @click="flag = true"
              >新增技巧</el-button
            ></el-col
          >
        </el-row>
      </div>

      <!-- 提示条 -->
      <el-alert
        type="info"
        style="margin-bottom: 15px"
        class="el-icon-info"
        :title="'数据一共' + total + '条'"
        :closable="false"
      >
      </el-alert>
      <!-- 表格 -->
      <el-table :data="list" style="width: 100%" empty-text>
        <el-table-column label="序号" width="80" type="index">
        </el-table-column>
        <el-table-column prop="title" label="文章标题" width="400">
          <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
            <el-button
              icon="el-icon-film"
              type="text"
              v-if="scope.row.videoURL"
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数"> </el-table-column>
        <el-table-column prop="username" label="录入人"> </el-table-column>
        <el-table-column prop="createTime" label="录入时间" width="172">
        </el-table-column>
        <el-table-column prop="state" label="状态" width="180">
        </el-table-column>

        <el-table-column prop="address" label="操作" width="195">
          <template slot-scope="{ row }">
            <el-button type="text" @click="preview(row)">预览</el-button>
            <el-button type="text" @click="changeState(row)">{{
              row.state === '已启用' ? '禁用' : '启用'
            }}</el-button>
            <el-button
              type="text"
              :disabled="row.state === '已禁用'"
              @click="edit(row)"
              >修改</el-button
            >

            <el-button
              type="text"
              @click="del(row.id)"
              :disabled="row.state === '已禁用'"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryObj.page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="queryObj.pagesize"
        layout="prev, pager, next, sizes,jumper"
        :total="total"
        style="margin-top: 20px; text-align: right; margin-bottom: 20px"
      >
      </el-pagination>
    </el-card>

    <!-- 预览弹窗 -->
    <el-dialog
      title="预览文章"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <div>
        <div class="title">
          <h2>{{ articlesDetail.title }}</h2>
          <p>
            <span>{{ articlesDetail.createTime }}</span>
            <span style="padding: 0 10px">{{ articlesDetail.username }} </span>
            <span class="el-icon-view" style="padding: 0 10px"></span>
            <span>{{ articlesDetail.visits }}</span>
          </p>
        </div>
        <div class="content"><p v-html="articlesDetail.articleBody"></p></div>
      </div>
    </el-dialog>
    <!-- 新增弹窗 -->
    <el-dialog
      :title="text"
      :visible.sync="flag"
      width="52%"
      height="50%"
      :before-close="handleClose"
    >
      <div>
        <el-form :model="form" :rules="rules" ref="form" label-width="80px">
          <el-form-item label="文章标题" prop="title">
            <el-input
              v-model="form.title"
              placeholder="请输入文章标签"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="文章内容"
            prop="articleBody"
            style="height: 300px"
          >
            <quill-editor
              v-model="form.articleBody"
              style="height: 200px"
            ></quill-editor>
          </el-form-item>
          <el-form-item label="视频地址">
            <el-input
              v-model="form.videoURL"
              placeholder="请输入视频地址"
            ></el-input
          ></el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="flag = false">取 消</el-button>
        <el-button type="primary" @click="add">确 认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
import { list, changeState, remove, add, update } from '@/api/hmmm/articles.js'
import { parseTime } from '@/utils/index.js'
export default {
  components: {
    quillEditor
  },
  data () {
    return {
      list: [],
      queryObj: {
        pagesize: 10,
        page: 1,
        keyword: '',
        state: null
      },
      flag: false,
      form: { title: '', articleBody: '', videoURL: '' },
      total: null,
      dialogVisible: false,
      articlesDetail: {},
      rules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]
      },
      row: {},
      text: '新增文章'
    }
  },
  async created () {
    this.initTable()
  },
  methods: {
    async initTable () {
      const res = await list(this.queryObj)
      this.total = res.data.counts
      this.list = res.data.items
      this.list.forEach(item => {
        item.state = item.state ? '已启用' : '已禁用'
        item.createTime = parseTime(item.createTime)
      })
    },
    // 点击修改当前页
    handleCurrentChange (value) {
      this.queryObj.page = value
      this.initTable()
    },
    // 点击修改一页显示几条
    handleSizeChange (value) {
      this.queryObj.pagesize = value
      this.initTable()
    },
    // 修改状态
    async changeState (row) {
      await changeState({
        id: row.id,
        state: row.state === '已禁用' ? 1 : 0
      })
      this.$message({
        message: '操作成功',
        type: 'success'
      })
      this.initTable()
    },
    // 搜索
    clickSearch () {
      this.initTable()
    },
    // 清除输入框以及重置表格
    close () {
      this.queryObj.state = ''
      this.queryObj.keyword = ''
      this.initTable()
    },
    // 删除
    del (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove({ id })
          this.initTable()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 预览
    async preview (row) {
      this.dialogVisible = true
      this.articlesDetail = row
    },
    // 关闭弹窗
    handleClose () {
      this.text = '新增文章'
      this.dialogVisible = false
      this.flag = false
      //   this.$refs.form.resetFields()
      this.form.videoURL = ''
      this.form.articleBody = ''
      this.form.title = ''
    },
    // 新增
    async add () {
      if (this.text === '修改文章') {
        await update({ id: this.row.id, ...this.form })
      } else await add(this.form)

      this.initTable()
      this.handleClose()
      this.text = '新增文章'
    },
    // 修改
    edit (row) {
      this.text = '修改文章'
      this.flag = true
      this.form.title = row.title
      this.form.articleBody = row.articleBody
      this.form.videoURL = row.videoURL
      this.row = row
    }
  },
  watch: {
    state: {
      handler (value) {
        this.initTable()
      }
    }
  }
}
</script>

<style scoped lang="less">
.title {
  border-bottom: 1px dashed #ccc;
  padding-bottom: 10px;
  h2 {
    margin: 0;
  }
  p {
    margin-left: 10px;
    margin-top: 10px;
  }
}
.content {
  background: #f5f5f5;
  padding: 10px;
}

.question-container {
  padding: 0 10px;
  margin: 10px 0;
  /deep/.el-card__body {
    padding: 0 20px;
  }
  //   card卡片
  .box-card {
    /deep/ .el-card__header {
      padding: 20px 20px 0;
      border: 0;
    }
  }
}
</style>